<template>
<view 
	class="levitatedSphereWrap" 
	@click.stop="call()" 
	@touchmove.stop="handleTouchMove"
    @touchend.stop="handleTouchEnd"
	:style="'top:'+ startY + 'px;left:'+startX+'px'"
>
	<u-icon name="server-fill" size="46rpx" color="#FFF"></u-icon>
	<view class="text">客服</view>
</view>
</template>

<script>
export default {
	name: 'LevitatedSphere',
	data(){
		return{
			startX: 0,
			startY: 0,
			localtionSta: true,
		}
	},
	created() {
		let LevitatedSphere = this.$store.state.LevitatedSphere;
		this.startX = LevitatedSphere.startX;
		this.startY = LevitatedSphere.startY;
		this.localtionSta = LevitatedSphere.localtionSta;
	},
	methods:{
		call(){
			const pageWidth = uni.getSystemInfoSync().windowWidth;
			if(this.localtionSta){
				this.startX = 0;
			}else{
				this.startX = pageWidth-60;
			}
			let LevitatedSphere = {
				startX: this.startX,
				startY: this.startY,
				localtionSta: this.localtionSta,
			}
			this.$store.commit('setLevitatedSphere',LevitatedSphere);
			this.timerFun();
			
			let phone = uni.getStorageSync('servicePhone')
			
			if(!phone){
				uni.showToast({
					title: '客服电话获取失败',
					icon: 'none'
				})
				return;
			}
			uni.makePhoneCall({
				phoneNumber: phone
			});
			
		},
		 handleTouchMove(event) {
			const touch = event.touches[0];
			this.startX = touch.clientX-30;
			this.startY = touch.clientY-30;
			this.timerFun();
		},
		handleTouchEnd(event) {
			const pageWidth = uni.getSystemInfoSync().windowWidth;
			if(this.startX <= pageWidth/2-30){
				this.startX = 0;
				this.localtionSta = true;
			}else{
				this.startX = pageWidth-60;
				this.localtionSta = false;
			}
			let LevitatedSphere = {
				startX: this.startX,
				startY: this.startY,
				localtionSta: this.localtionSta,
			}
			this.$store.commit('setLevitatedSphere',LevitatedSphere);
			this.timerFun();
		},
		timerFun(){
			clearTimeout(this.timer);
			this.timer = setTimeout(()=>{
				if(this.localtionSta){
					this.startX = this.startX-30;
				}else{
					this.startX = this.startX+30;
				}
				let LevitatedSphere = {
					startX: this.startX,
					startY: this.startY,
					localtionSta: this.localtionSta,
				}
				this.$store.commit('setLevitatedSphere',LevitatedSphere)
			},3000)
		},
	}
}
</script>

<style lang="scss">

.levitatedSphereWrap{
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #E4B673;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 101;
	box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, 0.1);
	
	.text{
		font-size: 28rpx;
		color: #FFF;
		margin-top: 2rpx;
	}
}

</style>